<template>
	<app-layout :overflow="false">
		<view class="nav">
			<view class="nav-title">我的金币</view>
			<view class="nav-num u-line-1">{{userInfo ? userInfo.integral : 0}}</view>
			<view class="nav-shop" @click="router('/plugins/check_in/index/index')">
				签到
			</view>
			<view class="nowdynas u-line-1" @click="toAbout">
				获取金币渠道方法、途径 >>>
			</view>
			<view @click="router('/pages/user-center/integral-detail/integral-detail')" class="log">
				<image load-lazy="true" src="./../image/log.png"></image>
				<text>金币明细</text>
			</view>
			<view @click="router('/plugins/integral_mall/exchange/exchange')" class="exchange">
				<image load-lazy="true" src="/static/image/icon/exchange.png"></image>
				<text>兑换记录</text>
			</view>
		</view>
		<view class="goods">
			<view class="goods-title">
				<view class="coupon-title">金币商城</view>
			</view>
			<scroll-view scroll-x class="cat-list">
				<view @click="tab(0)"
					:class="[`cat-item`,`t-omit`,`${_num == 0 ? getTheme+'-m-back active ' + getTheme:''}`]">全部</view>
				<view @click="tab(item.id)"
					:class="[`cat-item`,`t-omit`,`${_num == item.id ?getTheme+'-m-back active ' + getTheme:''}`]"
					v-for="item in cats" :key="item.id">{{item.name}}
				</view>
			</scroll-view>
			<view class="goods-list dir-left-wrap">
				<view open-type="navigate" @click="toGoods(item)" class="goods-item" v-for="item in goods"
					:key="item.id">
					<image load-lazy="true" mode="aspectFill" class="goods-img" :src="item.cover_pic"></image>
					<view class="out-dialog" v-if="item.goods_stock == 0 && appSetting.is_show_stock == '1'">
						<image :src="appSetting.is_use_stock == '1' ? appImg.plugins_out : appSetting.sell_out_pic">
						</image>
					</view>
					<view class="goods-name t-omit">{{item.name}}</view>
					<view class="goods-price" :class="getTheme+'-m-text ' + getTheme">
						{{item.integralMallGoods.integral_num}}金币<text v-if="item.price > 0">+￥{{item.price}}</text>
					</view>
					<view class="goods-old">￥{{item.original_price}}</view>
					<view class="goods-num">仅剩{{item.goods_stock}}件</view>
					<button v-if="item.goods_stock > 0" class="goods-exchange"
						:class="getTheme+'-m-back ' + getTheme">立即兑换</button>
					<button v-else class="goods-exchange" style="background: #CDCDCD;color: #fff;">已售罄</button>
				</view>
			</view>
			<view class="loading" v-if="loading">
				<view class="">
					<image class="isloading" src="/static/image/loading.gif" mode=""></image>
				</view>
				<view class="">
					加载中……
				</view>
			</view>
			<view class="no-goods" v-if="goods.length == 0 && !loading">
				暂无商品
			</view>
		</view>
		<view class="dialog-bg" v-if="lose || success">
			<view class="dialog">
				<view @click="close">
					<image load-lazy="true" class="close" src="/static/image/icon/icon-close.png"></image>
				</view>
				<view class="lose" v-if="lose">
					<image load-lazy="true" class="lose-img" src="./../image/lose.png"></image>
					<view class="lose-title">兑换失败！</view>
					<view>当前金币不足</view>
				</view>
				<view class="success" v-if="success">
					<image load-lazy="true" class="success-head" :src="integralImg.app_image.success"></image>
					<view>恭喜您，兑换成功！</view>
					<view class="main-between success-btn">
						<view @click="toList">
							<button class="to-card">去卡券包</button>
						</view>
						<view @click="toList">
							<button class="to-use">立即使用</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</app-layout>
</template>


<script>
	import {
		mapState,
		mapGetters
	} from "vuex";

	export default {
		data() {
			return {
				success: false,
				lose: false,
				_num: 0,
				more: false,
				setting: {},
				coupon: [],
				userInfo: {
					integral: 0
				},
				choose: {
					integral: 0
				},
				banners: [],
				cats: [],
				id: 0,
				exchangeCoupon: false,
				current: 'wechat',
				goods: [],
				args: false,
				page: 1,
				getTheme: 'q',
				loading: false
			}
		},
		computed: {
			...mapState({
				integralImg: state => state.mallConfig.plugin.integral_mall,
				appSetting: state => state.mallConfig.mall.setting,
				appImg: state => state.mallConfig.__wxapp_img.mall,
			}),
			...mapGetters('mallConfig', {
				getVideo: 'getVideo',
				// getTheme: 'getTheme'
			}),
		},
		methods: {
			close() {
				this.success = false;
				this.lose = false;
			},

			tab(id) {
				this._num = id;
				this.page = 1;
				this.goods = [];
				this.getGoods();
			},

			toList() {
				this.success = false;
				uni.navigateTo({
					url: '/pages/coupon/index/index'
				});
			},
			toGoods(data) {
				// #ifndef MP-BAIDU
				// if (data.goodsWarehouse.video_url && this.getVideo == 1) {
				// 	uni.navigateTo({
				// 		url: `/pages/goods/video?goods_id=${data.id}&sign=${data.sign}`
				// 	});
				// } else {
				uni.navigateTo({
					url: '/plugins/mch_solitaire/integral/goods?goods_id=' + data.id + '&issoltaire=1'
				});
				// }
				// #endif

				// #ifdef MP-BAIDU
				uni.navigateTo({
					url: '/plugins/mch_solitaire/integral/goods?goods_id=' + data.id
				});
				// #endif

			},
			toAbout() {
				uni.navigateTo({
					url: `/pages/rules/index?url=${encodeURIComponent(this.$apiSol.integral_mall.index)}&keys=${JSON.stringify(['setting', 'rule'])}`,
				});
			},
			router(url) {
				uni.navigateTo({
					url: url
				});
			},
			getList() {
				let that = this;
				that.$request({
					url: that.$apiSol.integral_mall.index,
				}).then(response => {
					that.$hideLoading();
					if (response.code === 0) {
						let {
							banners,
							setting,
							userInfo
						} = response.data;
						that.banners = banners;
						that.setting = setting;
						that.userInfo = userInfo;
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(() => {
					that.$hideLoading();
				});
			},
			getCoupon() {
				let that = this;
				that.$request({
					url: that.$apiSol.integral_mall.coupon,
				}).then(response => {
					that.$hideLoading();
					if (response.code === 0) {
						that.coupon = response.data.list;
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(() => {
					that.$hideLoading();
				});
			},
			getCat() {
				let that = this;
				that.$request({
					url: that.$apiSol.integral_mall.cats,
				}).then(response => {
					that.$hideLoading();
					if (response.code === 0) {
						that.cats = response.data.list;
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(() => {
					that.$hideLoading();
				});
			},
			getGoods() {
				let that = this;
				that.loading = true
				that.$request({
					url: that.$apiSol.integral_mall.goods,
					data: {
						cat_id: that._num,
						page: that.page
					}
				}).then(response => {
					that.loading = false
					that.$hideLoading();
					if (response.code === 0) {
						that.more = false;
						if (response.data.list.length == response.data.pagination.pageSize) {
							that.page++;
							that.more = true;
						}
						if (that.page > 1) {
							that.goods = that.goods.concat(response.data.list);
						} else {
							that.goods = response.data.list;
						}
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(() => {
					that.loading = false
					that.$hideLoading();
				});
			},
		},
		onReachBottom() {
			if (this.more) {
				this.getGoods();
			}
		},

		onShareAppMessage: function() {
			return this.$shareAppMessage({
				title: this.$children[0].navigationBarTitle,
				path: "/plugins/integral_mall/index/index",
			});
		},

		// #ifdef MP-WEIXIN
		onShareTimeline() {
			// 分享朋友圈beta
			return this.$shareTimeline({
				title: this.$children[0].navigationBarTitle,
				query: {} // 此处填写页面的参数
			});
		},

		// #endif
		onLoad() {
			let that = this;
			that._num = 0;
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
			that.$showLoading({
				type: 'global',
				text: '加载中...'
			});
			that.getList();
			that.getCoupon();
			that.getCat();
			that.getGoods();
		}
	}
</script>

<style scoped lang="scss">
	.nav {
		height: 554rpx; //460
		width: 100%;
		position: relative;
		background: #033501;
		padding: 72rpx 72rpx 0;
		background-image: url('https://wechat.shuangxitang.cn/web/uploads/grade/integral-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.nav-bg {
			width: 100%;
		}

		.nav-title {
			width: 100%;
			color: #FFFFFF;
			font-size: 28rpx;
			margin-top: 30px;
		}

		.nav-num {
			width: 450rpx;
			color: #FFFFFF;
			font-size: 72rpx;
			line-height: 108rpx;
		}

		.nav-shop {
			text-align: center;
			width: 154rpx;
			height: 56rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			line-height: 56rpx;
			background: #09ba07;
			border-radius: 28px;
			position: absolute;
			right: 72rpx;
			top: 188rpx;
		}

		.nowdynas {
			width: 100%;
			color: #FFFFFF;
			font-size: 24rpx;
			line-height: 108rpx;
		}

		.nowdynasex {
			text-align: center;
			// width: 116rpx;
			padding: 0 20rpx;
			height: 42rpx;
			color: #FFFFFF;
			font-size: 24rpx;
			line-height: 42rpx;
			background: linear-gradient(90deg, #FD6E60 0%, #FE4C4B 100%);
			border-radius: 28px;
			display: inline-block;
			margin-left: 20rpx;
		}
	}

	.exchange,
	.log {
		position: absolute;
		bottom: #{40rpx};
		color: #fff;
		font-size: 15px;
		height: #{34rpx};
		line-height: #{34rpx};
	}

	.exchange image,
	.log image {
		height: #{34rpx};
		width: #{34rpx};
		margin-right: #{16rpx};
		display: block;
		float: left;
	}

	.exchange {
		left: #{120rpx};
	}

	.log {
		right: #{120rpx};
	}

	.about {
		height: #{30rpx};
		width: #{30rpx};
		position: absolute;
		top: #{25rpx};
		right: 38%;
	}

	.about image {
		height: #{30rpx};
		width: #{30rpx};
		display: block;
	}

	.banner {
		margin: #{20rpx} 0;
		height: #{190rpx};
	}

	.banner swiper {
		height: #{190rpx};
	}

	.banner image {
		height: #{190rpx};
		width: 100%;
	}

	.coupon {
		background-color: #fff;
		padding: #{30rpx} 0 #{40rpx} #{25rpx};
	}

	.coupon-title {
		font-size: 15px;
		color: #353535;
		border-left: #{4rpx} solid linear-gradient(90deg, #FD6E60 0%, #FE4C4B 100%);;
		padding-left: #{16rpx};
		height: #{35rpx};
		line-height: #{35rpx};
		margin-bottom: #{38rpx};
	}

	.coupon-list {
		height: #{220rpx};
		white-space: nowrap;
		overflow: hidden;
		width: auto;
	}

	.coupon-item {
		width: #{330rpx};
		height: #{220rpx};
		position: relative;
		display: inline-block;
		font-size: 13px;
		color: #353535;
		margin-right: #{20rpx};
	}

	.coupon-item image {
		width: #{330rpx};
		height: #{220rpx};
	}

	.coupon-name {
		position: absolute;
		left: #{24rpx};
		top: #{10rpx};
		width: #{300rpx};
		font-weight: bold;

		&.discount text:after {
			content: '折';
			font-size: 50%;
		}
	}

	.coupon-name text {
		font-size: 20px;
		margin-right: #{12rpx};
	}

	.coupon-user {
		position: absolute;
		width: #{280rpx};
		left: #{24rpx};
		top: #{70rpx};
	}

	.coupon-exchange {
		position: absolute;
		bottom: #{22rpx};
		left: 0;
		right: 0;
		text-align: center;
	}

	.coupon-exchange view {
		display: inline-block;
		padding: 0 #{28rpx};
		text-align: center;
		height: #{48rpx};
		line-height: #{48rpx};
		border-radius: #{24rpx};
		border: #{2rpx} solid #353535;
		margin: 0 auto;
	}

	.goods-title {
		padding-left: #{20rpx};
		height: #{96rpx};
		line-height: #{96rpx};
		padding-top: #{30.5rpx};
		background-color: #fff;
		margin-top: #{24rpx};
		border-bottom: #{1rpx} solid #e2e2e2;
	}

	.cat-list {
		height: #{100rpx};
		background-color: #fff;
		border-bottom: #{1rpx} solid #e2e2e2;
		white-space: nowrap;
		overflow: hidden;
		width: auto;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.cat-item {
		display: inline-block;
		margin: #{23rpx};
		text-align: center;
		width: auto;
		color: #353535;
		font-size: 12px;
		height: #{54rpx};
		line-height: #{54rpx};
		padding: 0 #{20rpx};
	}

	.cat-item.active {
		border-radius: #{27rpx};
		color: #fff;
	}

	.goods-list {
		padding-left: #{24rpx};
	}

	.goods-item {
		width: #{344rpx};
		background-color: #fff;
		font-size: 14px;
		color: #353535;
		margin: #{14rpx} #{14rpx} 0 0;
		position: relative;
		display: block;
		border-radius: #{16rpx};
	}

	.goods-name {
		margin-top: #{16rpx};
		padding-left: #{24rpx};
	}

	.goods-img {
		height: #{344rpx};
		width: #{344rpx};
		display: block;
		border-top-left-radius: #{16rpx};
		border-top-right-radius: #{16rpx};
	}


	.out-dialog {
		width: #{344rpx};
		height: #{344rpx};
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .5);

		image {
			width: #{344rpx};
			height: #{344rpx};
		}
	}

	.goods-price {
		margin-top: #{10rpx};
		margin-left: #{24rpx};
		padding-bottom: #{125rpx};
	}

	.goods-old {
		font-size: 13px;
		color: #999;
		text-decoration: line-through;
		position: absolute;
		left: #{24rpx};
		bottom: #{88rpx};
	}

	.goods-num {
		position: absolute;
		right: #{24rpx};
		bottom: #{88rpx};
		font-size: 13px;
	}

	.goods-exchange {
		height: #{48rpx};
		line-height: #{48rpx};
		border-radius: #{24rpx};
		position: absolute;
		bottom: #{24rpx};
		left: #{24rpx};
		right: #{24rpx};
		color: #fff;
		font-size: 13px;
	}

	.goods-exchange::after {
		border: 0;
	}

	.dialog-bg {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.dialog {
		width: #{574rpx};
		margin: 0 auto;
		background-color: #fff;
		position: fixed;
		top: 25%;
		left: 0;
		right: 0;
		border-radius: #{16rpx};
	}

	.close {
		height: #{30rpx};
		width: #{30rpx};
		position: absolute;
		right: #{22rpx};
		top: #{22rpx};
		z-index: 10;
	}

	.lose {
		padding: #{88rpx} 0 #{88rpx} #{90rpx};
		height: #{310rpx};
		font-size: 15px;
		color: #353535;
	}

	.lose-img {
		height: #{134rpx};
		width: #{124rpx};
		margin-right: #{48rpx};
		display: block;
		float: left;
	}

	.lose-title {
		font-size: 23px;
		font-weight: 500;
		margin: #{15rpx} 0;
	}

	.success {
		height: #{350rpx};
		background-color: #fff;
		text-align: center;
		padding-top: #{150rpx};
		font-size: 18px;
		color: #353535;
		border-radius: #{16rpx};
	}

	.success-head {
		height: #{332rpx};
		width: #{574rpx};
		position: absolute;
		top: #{-215rpx};
		left: 0;
	}

	.to-card,
	.to-use {
		margin-top: #{44rpx};
		height: #{64rpx};
		border-radius: #{32rpx};
		line-height: #{64rpx};
		width: #{228rpx};
		font-size: 16px;
	}

	.to-card::after,
	.to-use::after {
		border: 0;
	}

	.to-card {
		background-color: #fff;
		color: #353535;
		border: #{1rpx} solid #999;
	}

	.to-use {
		background-color: #ff4544;
		color: #fff;
	}

	.dialog-tip {
		position: fixed;
		top: #{400rpx};
		left: 0;
		right: 0;
		padding-bottom: #{88rpx};
		width: #{640rpx};
		margin: 0 auto;
		z-index: 21;
		background-color: #fff;
		border-radius: 10px;
		text-align: center;
		font-size: #{30rpx};
	}

	.dialog-msg {
		margin: 0 #{50rpx} #{50rpx};
	}

	.dialog-title {
		margin: #{40rpx} auto #{35rpx};
	}

	.dialog-btn {
		height: #{88rpx};
		width: #{640rpx};
		border-top: #{1rpx} solid #e2e2e2;
		line-height: #{88rpx};
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.dialog-close,
	.dialog-submit {
		width: 50%;
	}

	.line {
		height: #{44rpx};
		margin-top: #{22rpx};
		width: #{1rpx};
		background-color: #e2e2e2;
	}

	.dialog-submit {
		color: #ff4544;
	}

	.success-btn {
		padding:0 #{39rpx};
	}

	.loading {
		width: 100%;
		// height: 300rpx;
		// line-height: 300rpx;
		text-align: center;
		margin: 0 auto;
		font-size: 24rpx;
		margin: 36rpx auto;

		.isloading {
			width: 54rpx;
			height: 54rpx;
		}
	}

	.no-goods {
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 24rpx;
	}
</style>
